<template lang="html">
  <div class="goods">
    <app-table :total="total" @fetchData="fetchData">
      <el-col :span="4">
        <el-input placeholder="序号/商品型号" v-model="filter.text"></el-input>
      </el-col>
      <div slot="table">
        <el-button size="small" type="info" @click="handleCreate" style="float: right;margin-right:10px">新增</el-button>
        <el-table :data="tableData" stripe border style="width: 100%">
          <el-table-column prop="id" label="序号" width="100" sortable>
          </el-table-column>
          <el-table-column prop="goodstype" label="商品型号" width="130">
          </el-table-column>
          <el-table-column label="图片" width="120">
            <template scope="scope">
              <img :src='scope.row.image'>
            </template>
          </el-table-column>
          <el-table-column prop="goodstitle" label="商品介绍" >
          </el-table-column>
          <el-table-column prop="money" label="价格" width="140">
          </el-table-column>
          <el-table-column prop="goodsnumber" width="140" label="数量">
          </el-table-column>
          <el-table-column prop="operation" label="操作" width="150" fixed="right">
            <template scope="scope">
           <!--    <el-button size="small" type="warning" @click="soldoutButton(scope.$index, scope.row)">下架</el-button> -->
              <el-button size="small" type="info" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </app-table>
    <goods-info v-model="goodsInfoVisible" :info="info" @submit="submit"></goods-info>
  </div>
</template>
<script>
import * as goods from '../../../api/goods.js';
import GoodsInfo from './goods-info.vue';
import AppTable from '../../common/app-table.vue';
import Config from '../../../config.js';
import {
  get_filter_params,
  reset_filter_params,
  form_init,
  copy
} from '../../../helpers.js'
export default {
  components: {
    AppTable,
    GoodsInfo
  },
  data() {
    return {
      total: 0,
      tableData: [],
      goodsInfoVisible: false,
      info: null,
      index: null,
      filter: {
        text: ''
      },
    }
  },
  created() {
    this.fetchData();
  },
  methods: {
    submit(info) {
      if (this.info) {
        copy(info, this.info)
      } else {
        let temp = copy(info);
        this.tableData.unshift(temp);
      }
    },
    fetchData(page = Config.page, bFilterReset = false) {
      if (bFilterReset)
        reset_filter_params(this.filter);
      let params = {
        page: page,
        filter: get_filter_params(this.filter)
      };
      goods.getgoodsTable(params).then(data => {
        this.total = data.total;
        this.tableData = data.data;
      });
    },
    //新增
    handleCreate() {
      this.goodsInfoVisible = true;
      this.info = null;
    },
    //编辑
    handleEdit(index, row) {
      this.goodsInfoVisible = true;
      this.info = row;
    },
    //删除
    handleDelete(index, row) {
      this.$confirm('此操作将永久删除物品编号为' + row.id + '的[' + row.name + ']是否继续?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        goods.delGoodsInfo(row.id).then(data => {
            this.tableData.splice(index, 1);
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
};
</script>
<style lang="less">
.goods {
  margin-top: 20px;
  th {
    text-align: center;
  }
  td {
    text-align: center;
  }
  td img {
    width: 50px;
    height:50px;
  }
}
</style>
